<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <table cellspacing="0" border="1" width="600" align="center">
            <tr>
                <th>内容</th>
                <th colspan="2">操作</th>
            </tr>
            <tr v-for="(item,index) in contents">
                <td>{{item}}</td>
                <td><a href="javascript:;" @click="upd(index)">修改</a> |
                    <a href="javascript:;" @click="del(index)">删除</a>
                </td>
            </tr>
        </table>
        <input type="text" v-model="txt">
        <button @click="add" type="button">添加</button>
        <button @click="new1" type="button">更新</button>
    </div>
</body>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            txt:"",
            text:"",
            ipt:"",
            index:"",
            contents:["2018罗大佑“当年离家的年轻人”巡回演唱会武汉站",
                    "【南京】2019费玉清告别演唱会-南京",
                    "2018 王力宏“龙的传人2060” 世界巡回演唱会-金华站",
                    "伍佰&China Blue Rockstar 演唱会-深圳站",
                    "开心麻花爆笑舞台剧《乌龙山伯爵》",
                    "【上海】舞台剧《金锁记》-new"]
        },
        methods:{
            add(){

                this.contents.push(this.txt);
                this.txt=""
            },
            del(index) {
                this.contents.splice(index, 1);
            },
            upd(index){
                this.txt = this.contents[index];
                this.index = index;
            },
            new1(){
                // alert(this.index)
                this.contents.splice(this.index, 1,this.txt);
                // this.contents[this.index]=this.txt;
            }

        }
    })
</script>
</html>